<template>
	<view class="share-wrapper">
		<top-nav title="发送"></top-nav>
		<view class="content">
			<view class="code" @click="show=true">
				<view class="info">AGT</view>
				<view class="icon1"></view>
			</view>
		</view>
		<view class="big-input">
			<u-input v-model="value" placeholderStyle="color:'#fff'" :customStyle="{fontSize:'96rpx'}" placeholder="999" inputAlign="center" type="number" :border="false" />
		</view>
		<view class="info">
			当前可提现金额：1000 AGT <br>
			约等于 1000 CNY <br>
			汇率：0.8762usdt
		</view>
		<view class="input">
			<view class="list">
				<view class="label">请确定您的发送地址</view>
				<view class="input-content">
					<u-input type="text" :customStyle="inputClass" placeholder="aswljsdhigheahi11233" />
				</view>
			</view>
			<view class="list">
				<view class="label">矿工费</view>
				<view class="input-content">
					<u-input type="number" :customStyle="inputClass" placeholder="0.99" />
				</view>
			</view>
		</view>
		<view class="btn-wrapper">
			<view class="share" @click="popupShow=true">确认</view>
		</view>
		<u-action-sheet :list="actionSheetList" v-model="show" ></u-action-sheet>
		<u-popup v-model="popupShow" mode="bottom">
			<view class="popup-content">
				<view class="title-wrapper">
					<view class="left" @click="popupShow=false">返回</view>
					<view class="title">发送详情</view>
				</view>
				<view class="price">999</view>
				<view class="desc">AGT</view>
				<view class="popup-list">
					<view class="left">支付信息</view>
					<view class="right">AGT 发送</view>
				</view>
				<view class="popup-list">
					<view class="left">发送地址</view>
					<view class="right">aswljsdhigheahi11233</view>
				</view>
				<view class="popup-list">
					<view class="left">接收地址</view>
					<view class="right">aswljsdhigheahi11233</view>
				</view>
				<view class="popup-list">
					<view class="left">旷工费</view>
					<view class="right">0.08532</view>
				</view>
				<view class="popup-list">
					<view class="left">汇率</view>
					<view class="right">0.008532</view>
				</view>
				<view class="comfirm-btn" @click="popupShow2=true;popupShow=false">确认</view>
			</view>
		</u-popup>
		<u-popup v-model="popupShow2" mode="bottom">
			<view class="popup-content">
				<view class="title-wrapper">
					<view class="left" @click="popupShow2=false;popupShow=true">返回</view>
					<view class="title">钱包密码</view>
				</view>
				<view class="number-wapper">
					<view class="input-wrapper">
						<u-input placeholder="" v-model="password" :maxlength="6" :selectionEnd="5"></u-input>
					</view>
					<view class="number-list" :class="password.length>=1?'active':''"></view>
					<view class="number-list" :class="password.length>=2?'active':''"></view>
					<view class="number-list" :class="password.length>=3?'active':''"></view>
					<view class="number-list" :class="password.length>=4?'active':''"></view>
					<view class="number-list" :class="password.length>=5?'active':''"></view>
					<view class="number-list" :class="password.length==6?'active':''"></view>
				</view>
				<view class="comfirm-btn">确定</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	export default{
		data(){
			return {
				value:'',
				inputClass:{
					color:'#ffffff',
					fontSize: '36rpx'
				},
				popupShow: false,
				popupShow2: true,
				show:false,
				password: '',
				actionSheetList: [
					{
						text: 'AGT',
						color:'#6D6D6D'
					},
					{
						text: 'USDT',
						color:'#6D6D6D'
					},
				],
			}
		},
		components:{
			topNav:topNav
		},
		methods:{
			previewImage(){
				this.$refs.uToast.show({
					title: '点击了图片预览',
					type: 'success',
				})
				var imgArr = [];
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});

			},
			gotoPage(path){
				uni.redirectTo({
				    url: path
				});
			},
			gotoRule(path){
				uni.navigateTo({
				    url: '/pages/rule/rule'
				});
			},
			change(val){
				this.password+=val;
				console.log(this.password)
			},
			backspace(){
				// 删除password的最后一个字符
				if(this.password.length) this.password = this.password.substr(0, this.password.length - 1);
				console.log(this.password);
			},
			finish(){}
		}
	}
</script>

<style lang="scss" scoped>
	.share-wrapper{
		.content{
			.u-image{
				margin: 0 auto;
			}
			.code{
				margin:32*2rpx auto 20*2rpx;
				width: 570rpx;
				height: 40*2rpx;
				background: rgba(105, 218, 115, 0.1);
				border-radius: 40rpx;
				border: 1px solid #69DA73;
				display:flex;
				align-items: center;
				justify-content: center;
				position:relative;
				font-size:14*2rpx;
				color:#CCCCCC;
				.icon{
					position:absolute;
					width: 15*2rpx;
					height:19*2rpx;
					background-image: url('/static/share/icon.png');
					background-size: 100% 100%;
					right:32*2rpx;
					top:50%;
					margin-top:-19rpx;
				}
				.icon1{
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-top: 12rpx solid #FFFFFF;
					border-right:10rpx solid transparent;
					position:absolute;
					right:62*2rpx;
				}
			}
		}
		.btn-wrapper{
			padding:0 20*2rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom:100rpx;
			.share{
				width: 100%;
				height: 60*2rpx;
				background: #FFB721;
				border-radius: 3*2rpx;
				display: flex;
				align-items: center;
				font-size:19*2rpx;
				justify-content: center;
			}
		}
		.big-input{
			height:114*2rpx;
			display: flex;
			align-items: center;
			margin:0 40rpx;
			border-bottom:1px solid #2C6131;
		}
		.info{
			margin: 36rpx auto;
			text-align: center;
			color: rgba(255,255,255,0.5);
			font-size:14*2rpx;
		}
		.input{
			padding:0 40rpx;
			.list{
				margin-bottom:30*2rpx;
				font-size:14px;
				.label{
					font-size:14*2rpx;
					opacity: 0.5;
				}
				.input-content{
					height:100rpx;
					display:flex;
					align-items: center;
					border-bottom:1px solid #2C6131;
				}
			}
		}
		.popup-content{
			color:#000;
			.title-wrapper{
				text-align: center;
				position:relative;
				height:90rpx;
				line-height:90rpx;
				font-size:36rpx;
				.left{
					position:absolute;
					top:0;
					left:40rpx;
					font-size:32rpx;
					display: flex;
					align-items: center;
					&::before{
						content:'';
						display: block;
						width: 0;
						height: 0;
						border-top: 10rpx solid transparent;
						border-right: 12rpx solid #000;
						border-bottom:10rpx solid transparent;
						margin-right:20rpx;
					}
				}
			}
			.price{
				font-size:96rpx;
				text-align: center;
			}
			.desc{
				text-align: center;
				margin-bottom:10rpx;
				font-size:24rpx;
			}
			.popup-list{
				display: flex;
				padding:0 40*2rpx ;
				height:50*2rpx;
				align-items: center;
				.left{
					width:200rpx;
					color:rgba(0,0,0,0.49);
					font-size:28rpx;
				}
				.right{
					font-size:36rpx;
				}
			}
			.comfirm-btn{
				margin:80rpx 40rpx 100rpx;
				height: 60px;
				background: #FFB721;
				border-radius: 7px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size:40rpx;
				color:#fff;
			}
			.number-wapper{
				width: 351*2rpx;
				height: 48*2rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 2*2rpx 0px #1677FF;
				border-radius: 8*2*2rpx;
				border: 1px solid #1677FF;
				margin: 100rpx auto 300*2rpx;
				display: flex;
				align-items: center;
				position:relative;
				.number-list{
					flex:1;
					height:100%;
					display: flex;
					align-items: center;
					justify-content: center;
					&:not(:last-child){
						border-right:1px solid #E5E5E5;
					}
					&.active{
						&::after{
							content: '';
							display: block;
							width:24rpx;
							height:24rpx;
							border-radius: 50%;
							background-color: #333333;
						}
					}
				}
				.input-wrapper{
					left:50%;
					width:100%;
					transform: translateX(-50%);
					position:absolute;
					letter-spacing: 100rpx;
					text-indent: 50rpx;
					z-index: 9;
					/deep/.uni-input-input{
						color:rgba(0,0,0,0);
					}
				}
			}
		}
		/deep/.u-drawer-bottom{
			border-radius: 50rpx 50rpx 0 0;
		}
	}
</style>
